<template>
  <div class='dashboard'>

    <LongyanMap></LongyanMap>
    
    <!-- //预警报警级别 over-->
    <div class="til">预警报警级别</div>
    <div style="display: flex;width: 440px;">
      <LevelRing bgClass="level1" text="I级 特别严重" :total="1000" :curValue="100"></LevelRing>
      <LevelRing bgClass="level2" text="II级 严重" :total="1000" :curValue="200"></LevelRing>
      <LevelRing bgClass="level3" text="III级 较严重" :total="1000" :curValue="300"></LevelRing>
      <LevelRing bgClass="level4" text="IV级 一般" :total="1000" :curValue="400"></LevelRing>
    </div>

    <div class="circle-chart-component-box">
      <div class="pie-item" :style="{ background: `conic-gradient(var(--one-color) 0%,transparent 100%)` }"></div>
    </div>

    <!-- <img style="width: 100%;" src="../../assets/images/bigScreen.jpg" alt=""> -->
    <!-- //面积图 over-->
    <acreage></acreage>
    <!-- //玫瑰图 over -->
    <rose></rose>
    <!-- //排名 over -->
    <!-- <rank title="排名"></rank> -->
    <!-- //雷达 over-->
    <radar></radar>
    <!-- 堆积柱状图 over-->
    <column></column>
    <!-- 带背景色的柱状图 over -->
    <singleColumn></singleColumn>
    <!-- //圆圈图 over-->
    <RisingSun></RisingSun>

    <!-- //预警报警趋势分析图 over-->
    <div class="til">预警报警趋势分析图</div>
    <TrendAnalysis></TrendAnalysis>

    <!-- //预警报警类型图 over-->
    <div class="til">预警报警类型图</div>
    <SingleRing></SingleRing>

    <!-- //圆角环形图  还缺图例 数据未封装-->
    <!-- <annular></annular> -->
    <!-- //菱形 -->
    <!-- <rhombus></rhombus> -->

    <!-- 两项并列 -->
    <!-- <twoInParallel></twoInParallel> -->
    
  </div>
</template>
  
<script>
import { mapState } from 'vuex'
import acreage from './acreage.vue'
import RisingSun from './RisingSun.vue'
import radar from './radar.vue'
import annular from './annular.vue'
import rose from './rose.vue'
import column from './column.vue'
import rhombus from './rhombus.vue'
import singleColumn from './singleColumn.vue'
import TrendAnalysis from './TrendAnalysis.vue'
import SingleRing from './SingleRing.vue'
import LevelRing from './LevelRing.vue'
import LongyanMap from '@/components/map/longyan.vue'

import rank from './similarEcharts/rank.vue'
import twoInParallel from './similarEcharts/twoInParallel.vue'


export default {
  components: {
    acreage,
    RisingSun,
    rank,
    radar,
    annular,
    rose,
    column,
    rhombus,
    singleColumn,
    twoInParallel,
    TrendAnalysis,
    SingleRing,
    LevelRing,
    LongyanMap
  },
  data() {
    return {

    };
  },
  computed: {
    ...mapState('config', ['inFilePrefix'])
  },
  watch: {},
  methods: {
  },
  created() {
    console.log('inFilePrefix -->>' + this.inFilePrefix + 'saf')
  },
  mounted() {

  },
}
</script>
  
<style lang='less' scoped>
.circle-chart-component-box {
  position: relative;
  --one-color: #ff67a8;
  --two-color: #6eec9b;
  --three-color: #f97b7b;
  --four-color: #4ae4f0;
  --five-color: #f4aa6a;

  .pie-item {
    position: absolute;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    mask: radial-gradient(transparent,
        transparent 7px,
        #000 8px,
        #000 8px,
        #000 100%);

    &:nth-child(1)::before {
      background: linear-gradient(90deg,
          var(--one-color) 50%,
          transparent 51%,
          transparent 100%);
    }

    // &::before {
    //   content: '';
    //   position: absolute;
    //   inset: 0;
    //   width: 24px;
    //   height: 24px;
    //   top: 0;
    //   left: 60px;
    //   border-radius: 50%;
    // }
  }
}
</style>